<template>
  <div>
    <search-modal :show.sync="searchMenu" :icon-show="false" :width="360">
      <Row class="mb-10">
        <i-col span="10">
          <search-modal-title :width="100"><Icon type="ios-search"/>高级查询</search-modal-title>
        </i-col>
        <i-col span="14" style="text-align: right;">
          <Button class="cust-btn" type="primary" @click="queryStock">查询</Button>
          <Button class="cust-btn" @click="reset">重置</Button>
        </i-col>
      </Row>
      <Form :label-width="100">
        <FormItem label="品类：" style="margin-bottom: 0">
          <i-select v-model="searchForm.matTypCodeList" size="small" multiple clearable filterable>
            <i-option v-for="(item, index) in matTypeList" :key="index" :value="item.dictValue">{{ item.dictName }}</i-option>
          </i-select>
        </FormItem>
        <FormItem label="外部批次号：" style="margin-bottom: 0">
          <el-input size="mini" v-model="searchForm.batchNum" placeholder="按外部批次号查询" />
        </FormItem>
        <FormItem label="托盘号：" style="margin-bottom: 0">
          <el-input size="mini" v-model="searchForm.palletCode" placeholder="按托盘号查询" />
        </FormItem>
      </Form>
    </search-modal>
    <div class="menu">
      <div class="menu-items">
        <p>{{ wareObj.whName }}</p>
        <p>({{ thousandthPercentile(customerSumObj.weight || 0) }}KG)</p>
      </div>
    </div>
    <div class="operate">
      <div>
        <Input size="mini" v-model="searchForm.matName" placeholder="按品名查询" style="width: 150px;" @keyup.native.enter="queryStock" search />
        <Input size="mini" v-model="searchForm.businessItem" placeholder="按柜号查询" style="width: 150px; margin-left: 5px" @keyup.native.enter="queryStock" search />
        <span style="text-align: right;margin-left: 5px;">组盘时间:</span>
        <el-date-picker
          size="mini"
          v-model="searchForm.date"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left: 5px"
          @change="queryStock"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <Button class="cust-btn" type="primary" @click="searchMenu = true">高级查询</Button>
        <Button class="cust-btn" type="primary" @click="exportExcel" :loading="exportBtnLoading">导出</Button>
      </div>
      <Page :total="listQuery.total" :current="listQuery.pageNum" :page-size="listQuery.pageSize"
            @on-change="pageChange" show-total></Page>
    </div>
    <div class="content-list" v-loading="loading">
      <div class="cus-card flex-item">
        <div>合计：</div>
        <div class="margin-left-10">总计数量：<span class="font-weight">{{thousandthPercentile(customerSumObj.sumQty || 0)}}</span> 件</div>
        <div class="margin-left-10">总重量：<span class="font-weight">{{thousandthPercentile(customerSumObj.weight || 0)}}</span> KG</div>
        <div class="margin-left-10">托数：<span class="font-weight">{{thousandthPercentile(customerSumObj.sumTraceCode || 0)}}</span> 托</div>
      </div>
      <template v-if="list.length">
        <div class="card-scroll" style="height: calc(100vh - 299px)">
          <div class="cus-card" v-for="(item, index) in list" :key="index">
            <div class="cus-content">
              <Row :gutter="5">
                <Col :span="4">
                  <span>柜号：</span>
                  {{ item.businessItem }}
                </Col>
                <Col :span="4">
                  <span>业务归属日：</span>
                  {{ useDate(item.businessDate) }}
                </Col>
                <Col :span="4">
                  <span>品名：</span>
                  {{ item.matName }}
                </Col>
                <Col :span="4">
                  <span>品类：</span>
                  {{ useDict(item.matTypCode, matTypeList) }}
                </Col>
                <Col :span="4">
                  <span>外部批次号：</span>
                  {{ item.batchNum }}
                </Col>
              </Row>
              <Row :gutter="5" style="margin-top: 5px">
                <Col :span="4">
                  <span>厂号：</span>
                  {{ item.factoryCode }}
                </Col>
                <Col :span="4">
                  <span>托盘号：</span>
                  {{ item.traceCode }}
                </Col>
                <Col :span="4">
                  <span>件数(件)：</span>
                  {{ thousandthPercentile(item.orderQty || 0)}}
                </Col>
                <Col :span="4">
                  <span>重量(KG)：</span>
                  {{ thousandthPercentile(item.orderWeight || 0)}}
                </Col>
                <Col :span="4">
                  <span>组盘时间：</span>
                  {{ useDate(item.dateCfm) }}
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <empty-comp />
      </template>
    </div>
  </div>
</template>

<script>
import {getCurrentAgentPermissionWareHouse} from "@/libs/handleWareHouseList";
import {exportExcelHttp, thousandthPercentile, useCustomer, useDate, useDict, useHttp, useHttpGet} from "@/view/wms/js";
import SearchModal from "_c/search-modal/index.vue";
import SearchModalTitle from "_c/search-modal/search-modal-title/index.vue";
import EmptyComp from "@/view/wms/comp/EmptyComp.vue";
import fileDownload from "js-file-download";

export default {
  name: "IntoStockDetailInfo",
  components: {EmptyComp, SearchModalTitle, SearchModal},
  data() {
    return {
      loading: false,
      wareObj: {},
      wmsUrl: {},
      searchForm: {
        date: [new Date(new Date(new Date().toLocaleDateString()).setDate(new Date().getDate() - 6)), new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)],
      },
      customerSumObj: {},
      list: [],
      matTypeList: [],
      searchMenu: false,
      exportBtnLoading: false,
      searchQuery: {},
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 50,
        filterList: [],
        sortList: [],
        searchKey: '',
        notInMatTypeCodeList: ["9999", "0001"]
      }
    }
  },
  methods: {
    thousandthPercentile,
    useDict,
    useDate,
    reset() {
      this.searchForm = {
        date: [new Date(new Date(new Date().toLocaleDateString()).setDate(new Date().getDate() - 6)), new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)]
      };
      this.queryStock();
    },
    queryStock() {
      if (!this.searchForm.date) {
        return this.$Message.error('请选择组盘时间！');
      }
      this.searchForm.startTime = this.searchForm.date[0];
      this.searchForm.endTime = this.searchForm.date[1];
      this.searchQuery = {
        ...this.listQuery,
        ...this.searchForm
      }
      this.initData();
      this.initSum();
    },
    pageChange() {},
    openMore(item) {
      item.show = !item.show;
    },
    initData() {
      this.loading = true;
      useHttp('/api/wms_in_plan/inPlanStatistics', this.searchQuery, this.wmsUrl).then(res => {
        const {list, total} = res.data.returnData.pageInfo;
        list.forEach(item => item.show = false);
        this.list = list;
        this.listQuery.total = total;
      }).finally(() => {
        this.loading = false;
      });
    },
    initSum() {
      let body = {...this.searchQuery};
      useHttp('/api/wms_in_plan/selectInSummaryData', body, this.wmsUrl).then(res => {
        this.customerSumObj = res.data.returnData;
      });
    },
    async initDictData() {
      try{
        const {data} = await useHttpGet('/api/dictionary/MAT_TYPE/list', {}, this.wmsUrl);
        this.matTypeList = data.returnData;
      } catch(e) {
        console.error(`获取字段数据失败-> ${e}`);
      }
    },
    async init() {
      try {
        const {data: returnData} = await getCurrentAgentPermissionWareHouse();
        if (returnData) {
          if (!returnData.length) {
            return this.$Message.error('仓库信息为空！');
          }
          this.wareObj = returnData[0];
          const {ipProt, whCode} = this.wareObj;
          this.wmsUrl = ipProt;
          this.listQuery.ownerCodeList = [useCustomer(this)];
          this.listQuery.whCodes = [whCode];
          await this.initDictData();
          this.queryStock();
        }
      } catch (e) {
        console.error(e);
      }
    },
    exportExcel() {
      if (!this.list.length) {
        return this.$Message.warning('暂无可导出数据');
      }
      this.exportBtnLoading = true;
      exportExcelHttp('/api/wms_in_plan/exportInPlanStatisticsData', this.searchQuery, this.wmsUrl).then(response => {
        if (response.status === 200) {
          this.$success('操作成功');
          fileDownload(response.data, '入库查询信息.xlsx');
        }
      }).finally(() => {
        this.exportBtnLoading = false;
      })
    }
  },
  mounted() {
    this.init();
  }
}
</script>

<style scoped lang="less">
@import "./style/index";
</style>
